<template>
  <div class="charge-tab">
    <el-card>
      <div class="header-bar">
        <el-input v-model="registerId" placeholder="请输入挂号ID" style="width: 200px; margin-right: 12px;" />
        <el-button type="primary" @click="fetchFee">查询</el-button>
      </div>
      <div class="amount-info">
        <el-alert type="info" :closable="false" show-icon>
          患者账单合计金额：<span style="color: #ff5500; font-weight: bold;">{{ totalAmount }}元</span>
        </el-alert>
      </div>
      <el-table :data="feeList" border style="width: 100%; margin-top: 18px;">
        <el-table-column type="index" label="#" width="50" />
  <el-table-column prop="name" label="名称" />
  <el-table-column prop="guige" label="规格" />
  <el-table-column prop="count" label="数量" width="80" />
  <el-table-column prop="price" label="单价" width="100" />
  <el-table-column prop="jiner" label="金额" width="100" />
  <el-table-column prop="state" label="收费状态" />
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import request from '@/utils/request'
import { useRoute } from 'vue-router'

const route = useRoute()
const registerId = ref('')
const feeList = ref([])
const totalAmount = ref('0.00')

const fetchFee = async () => {
  const id = registerId.value || route.query.patientId || ''
  if (!id) {
    ElMessage.warning('请输入挂号ID')
    return
  }
  try {
    const res = await request.get('/fee/get', { params: { registerId: id } })
    feeList.value = res.data || []
    // 合计金额，确保jiner为数字
    totalAmount.value = feeList.value.reduce((sum, item) => {
      const val = Number(item.jiner)
      return sum + (isNaN(val) ? 0 : val)
    }, 0).toFixed(2)
  } catch (e) {
    ElMessage.error('查询失败: ' + (e.message || '未知错误'))
  }
}

onMounted(() => {
  // 页面初始化自动查询
  fetchFee()
})
</script>

<style scoped>
.charge-tab {
  padding: 12px 0;
}
.header-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.amount-info {
  margin-bottom: 16px;
}
</style>
